<template>
  <body>
    <header>
      <div class="translate-box">
        <!-- 修改为直接调用 translate.js 的方法 -->
        <a @click="changeLanguage('english')">EN</a>
        <a>/</a>
        <a @click="changeLanguage('chinese_simplified')">中</a>
      </div>
    </header>

    <!-- card区 -->
    <div class="card-box">
      <div class="card-title-box">
        <div><img src="../assets/image/jinanshimeishuguan.png" /></div>
        <div><img src="../assets/image/jinanshuyuan.png" /></div>
      </div>

      <div class="card-list">
        <div v-for="column in filteredColumns" :key="column.columnId" :class="{
          'card-item': true,
          'double-width': column.name === '党建专区',
          'card-width-1': column.width === 1 && column.name !== '党建专区',
          'card-width-2': column.width === 2 && column.name !== '党建专区'
        }" :style="{ background: `url(${column.imageUrl}) no-repeat center center`, backgroundSize: 'cover' }"
          @click="navigateToColumn(column.columnId)">
          <a :href="column.link" target="_blank">
            <div class="card-item-title">{{ column.name }}</div>
          </a>
        </div>
      </div>
    </div>

    <!-- 参观须知 -->
    <div class="notice-box">
      <div class="notice-box-title">- 参观须知 -</div>
      <div class="notice-content">
        <div class="notice-item">
          <div class="notice-item-title">开放时间</div>
          <div class="notice-item-icon">
            <span class="iconfont icon-house" style="font-size: 70px;"></span>
          </div>
          <div class="notice-item-content">
            <p>上午9：00时至下午17：00时，16：00后将不再入场</p>
          </div>
        </div>
        
        <div class="notice-item">
          <div class="notice-item-title">交通路线</div>
          <div class="notice-item-icon">
            <span class="iconfont icon-gonggongqiche-03" style="font-size:120px;display: flex;justify-content: center;align-items: center;margin-top: 10px;"></span>
          </div>
          <div class="notice-item-content notice-item-traffic">
            <span><b>1、</b>乘133路到省会文化艺术中心站下车，北行218米。</span>
            <span><b>2、</b>乘19路、K167到齐州路兴福寺路站下车，向东1018米。</span>
            <span><b>3、</b>乘K156、K157、K58到济南西站公交枢纽站下车，向东1500米。</span>
          </div>
        </div>
        
        <div class="notice-item">
          <div class="notice-item-title">数字展厅</div>
          <div class="notice-item-icon">
            <span class="iconfont icon-vrbofangqi" style="font-size: 80px;"></span>
          </div>
          <div class="notice-item-content">
            <a @click="showMessage" style="cursor: pointer;">
              <div class="enter-vr">立即进入</div>
            </a>
          </div>
        </div>
        
        <div class="notice-item">
          <div class="notice-item-title">参观须知</div>
          <div class="notice-item-content" style="margin-top: 30px;margin-left: 20px;">
            <p>逢星期一闭馆，节假日照常开馆。</p>
            <p>济南市美术馆全年免费开放，观众入馆需携带身份证换取纸质门票。</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 馆院简讯 -->
    <News></News>

    <!-- 展览展讯 -->
    <Exhibition></Exhibition>

    <!-- 创作研究 -->
    <CreationResearch></CreationResearch>

    <!-- 公共教育 -->
    <div class="public-education-box">
      <div class="public-education-title">公共教育</div>
      <div class="public-education-content">
        <div class="public-education-detail">
          <p>春节是中华民族最隆重的传统佳节，春节期间贴福送福承载着厚重的历史文化和人民对幸福生活的美好愿景。2月11日，大年初二，为营造新春佳节欢乐祥和的氛围，进一步弘扬中华民族优秀传统文化，
            济南市美术馆（济南画院）开展"祥龙送福"福字拓印活动，让观众把福气带回家。</p>
          <div class="public-education-detail-img-list">
            <a target="_blank"><img src="../assets/image/static/01.png" /></a>
            <a target="_blank"><img src="../assets/image/static/02.png" /></a>
            <a target="_blank"><img src="../assets/image/static/03.png" /></a>
          </div>
        </div>

        <div class="swiper public-education-swiper">
          <div class="swiper-wrapper public-education-swiper-wrapper">
            <a class="swiper-slide public-education-swiper-slide" target="_blank" style="margin-top: 20px;">
              <img src="../assets/image/static/04.png" />
            </a>
          </div>
          <div class="swiper-pagination public-education-swiper-pagination"></div>
        </div>
      </div>
      <div class="public-education-trapezoid"></div>
    </div>

    <!-- 典藏鉴赏 -->
    <Appreciation></Appreciation>

    <Footer></Footer>
  </body>
</template>

<script>
// 导入JavaScript文件
import '../assets/js/public/jquery.js';
// import '../assets/js/public/swiper.js';
import { translate } from '../assets/js/public/translate.js';
import '../assets/js/public/reset.js';
import { ElMessage } from 'element-plus'; // 引入 ElMessage

import { defineComponent, computed, onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useColumnsStore } from '@/store/column';
import Footer from '../components/footer.vue';
import { getArticleListService } from '@/api/user.js';
import News from '../views/mainNews.vue';
import Exhibition from '../views/mainExhibition.vue';
import CreationResearch from '../views/CreationResearch.vue';
import Appreciation from '../views/Appreciation.vue';
export default defineComponent({
  name: 'ColumnVue',
  components: {
    Footer,
    News,
    Exhibition,
    CreationResearch,
    Appreciation,
  },
  setup() {
    const columnsStore = useColumnsStore();
    const router = useRouter();
    const route = useRoute();

    // 根据路由参数加载专栏数据（如果有的话）
    if (route.params.id) {
      console.log('当前专栏ID:', route.params.id);
      // 根据专栏ID加载数据等逻辑
    }

    // 导航到栏目详情页的方法
    const navigateToColumn = (columnId) => {
      columnsStore.selectColumn(columnId);
      router.push({ path: `/column/${columnId}` });
    };

    // 过滤掉第9个专栏（索引为8），并处理"党建专区"
    const filteredColumns = computed(() => {
      return parentColumns.value.filter((column, index) => index !== 6).map((column, idx) => {
        if (column.columnId === 3) {
          return { ...column, width: 2 };
        }
        return column;
      });
    });

    const parentColumns = computed(() => columnsStore.parentColumns);
    // 语言切换方法
    const changeLanguage = (langs) => {
      // 直接调用 translate.js 的切换语言方法
      translate.changeLanguage(langs);
    };

    // 在组件挂载时获取父级栏目数据，并尝试加载默认的子栏目文章
    onMounted(async () => {
      await columnsStore.fetchParentColumns();
      // 设置支持的语言
      translate.selectLanguageTag.languages = 'english,chinese_simplified';

      // 设置默认翻译的语言
      translate.language.setLocal('chinese_simplified');

      // 初始化配置
      translate.init();

      // 设置自动识别浏览器语言
      translate.setAutoDiscriminateLocalLanguage();

      // 执行翻译
      translate.execute();
      // 可选：启动翻译监听，对于动态内容自动翻译
      translate.request.listener.start();
    });

    // 添加点击事件处理方法
    const showMessage = () => {
      ElMessage({
        message: "还未开放，敬请期待！",
        type: "info", // 消息类型
      });
    };

    return {
      parentColumns,
      filteredColumns,
      navigateToColumn,
      changeLanguage,
      showMessage,
    };
  }
});
</script>

<style lang="scss">
@import '../assets/css/iconfont.css';

@import '../assets/css/public/reset.css';
@import '../assets/css/public/swiper.css';
@import '../assets/css/public/footer.css';

@import '../assets/css/main/header.css';
@import '../assets/css/main/notice-box.css';
@import '../assets/css/main/card-box1.css';
@import '../assets/css/main/news-box.css';
@import '../assets/css/main/exhibition.css';
@import '../assets/css/main/creation.css';

@import '../assets/css/main/public-education.css';
@import '../assets/css/main/appreciate.css';

body {
  background-color: white; // 设置背景色为灰色
  min-width: 75%; // 设置页面的最小宽度为视口宽度的75%
  width: 100%; // 确保页面的宽度默认为100%
}
</style>